<template>
    <view class="bg-white min-h-screen">
        <!-- 导航栏 -->
        <view class="px-4 py-3 border-b border-slate-100">
            <view class="flex justify-between items-center">
                <button class="p-2" @tap="goBack">
                    <text class="iconfont icon-arrow-left text-slate-800"></text>
                </button>
                <text class="text-lg font-medium text-slate-800">数据统计</text>
                <button class="p-2" @tap="showOptions">
                    <text class="iconfont icon-more text-slate-800"></text>
                </button>
            </view>
        </view>

        <!-- 时间筛选 -->
        <view class="px-5 py-4 border-b border-slate-100">
            <view class="flex justify-between items-center">
                <view class="flex items-center">
                    <button class="p-1" @tap="prevPeriod">
                        <text class="iconfont icon-chevron-left text-slate-500"></text>
                    </button>
                    <text class="text-base font-medium text-slate-800 mx-3">{{ currentPeriodText }}</text>
                    <button class="p-1" @tap="nextPeriod">
                        <text class="iconfont icon-chevron-right text-slate-500"></text>
                    </button>
                </view>
                <view class="flex">
                    <button v-for="(period, index) in periods" :key="index" class="px-3 py-1 rounded-full text-sm mr-2"
                        :class="selectedPeriod === period.value ? 'bg-indigo-500 text-white' : 'bg-slate-100 text-slate-600'"
                        @tap="changePeriod(period.value)">
                        {{ period.label }}
                    </button>
                </view>
            </view>
        </view>

        <!-- 统计概览 -->
        <view class="px-5 py-6">
            <text class="text-base font-medium text-slate-800 mb-4 block">概览</text>

            <view class="grid grid-cols-3 gap-4">
                <view class="bg-slate-50 rounded-lg p-4 flex flex-col items-center">
                    <text class="text-xs text-slate-500 mb-1">习惯完成率</text>
                    <text class="text-xl font-bold text-indigo-600">{{ stats.habitCompletionRate }}%</text>
                </view>
                <view class="bg-slate-50 rounded-lg p-4 flex flex-col items-center">
                    <text class="text-xs text-slate-500 mb-1">目标进度</text>
                    <text class="text-xl font-bold text-indigo-600">{{ stats.goalProgress }}%</text>
                </view>
                <view class="bg-slate-50 rounded-lg p-4 flex flex-col items-center">
                    <text class="text-xs text-slate-500 mb-1">项目完成</text>
                    <text class="text-xl font-bold text-indigo-600">{{ stats.completedProjects }}</text>
                </view>
            </view>
        </view>

        <!-- 习惯统计 -->
        <view class="px-5 py-6 border-t border-slate-100">
            <text class="text-base font-medium text-slate-800 mb-4 block">习惯统计</text>

            <!-- 习惯完成率图表 -->
            <view class="bg-white rounded-xl shadow-sm border border-slate-100 p-4 mb-6">
                <view class="flex justify-between items-center mb-4">
                    <text class="text-sm font-medium text-slate-700">习惯完成率趋势</text>
                    <view class="flex items-center">
                        <view class="w-3 h-3 bg-indigo-500 rounded-full mr-1"></view>
                        <text class="text-xs text-slate-500">完成率</text>
                    </view>
                </view>

                <!-- 这里应该是图表组件，使用简化的模拟 -->
                <view class="h-40 bg-slate-50 rounded-lg flex items-end justify-between px-2 py-4">
                    <view v-for="(item, index) in habitCompletionData" :key="index"
                        class="w-6 bg-indigo-500 rounded-t-sm mx-1" :style="{ height: `${item}%` }"></view>
                </view>

                <view class="flex justify-between mt-2">
                    <text v-for="(day, index) in weekDays" :key="index" class="text-xs text-slate-500 w-8 text-center">
                        {{ day }}
                    </text>
                </view>
            </view>

            <!-- 习惯排行 -->
            <view class="bg-white rounded-xl shadow-sm border border-slate-100 p-4">
                <view class="flex justify-between items-center mb-4">
                    <text class="text-sm font-medium text-slate-700">习惯排行</text>
                    <button class="text-xs text-indigo-600" @tap="navigateTo('/subPages/statistics/habits')">
                        查看全部
                    </button>
                </view>

                <view v-for="(habit, index) in topHabits" :key="index" class="flex items-center mb-3">
                    <view class="w-8 h-8 rounded-full flex items-center justify-center mr-3"
                        :style="{ backgroundColor: habit.color + '20' }">
                        <text class="iconfont text-sm" :class="habit.icon" :style="{ color: habit.color }"></text>
                    </view>
                    <view class="flex-1">
                        <text class="text-sm font-medium text-slate-800">{{ habit.title }}</text>
                        <view class="flex items-center mt-1">
                            <view class="flex-1 h-1-5 bg-slate-200 rounded-full overflow-hidden">
                                <view class="h-full rounded-full bg-indigo-500"
                                    :style="{ width: `${habit.completionRate}%` }"></view>
                            </view>
                            <text class="text-xs text-slate-500 ml-2 w-8">{{ habit.completionRate }}%</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 目标统计 -->
        <view class="px-5 py-6 border-t border-slate-100">
            <text class="text-base font-medium text-slate-800 mb-4 block">目标统计</text>

            <!-- 目标进度分布 -->
            <view class="bg-white rounded-xl shadow-sm border border-slate-100 p-4 mb-6">
                <view class="flex justify-between items-center mb-4">
                    <text class="text-sm font-medium text-slate-700">目标进度分布</text>
                </view>

                <!-- 这里应该是饼图组件，使用简化的模拟 -->
                <view class="flex justify-center py-4">
                    <view class="w-32 h-32 rounded-full border-8 border-indigo-500 relative">
                        <view class="absolute inset-0 border-8 border-green-500"
                            style="clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%)"></view>
                        <view class="absolute inset-0 border-8 border-yellow-500"
                            style="clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%)"></view>
                        <view class="absolute inset-0 border-8 border-red-500"
                            style="clip-path: polygon(50% 50%, 50% 100%, 0 100%, 0 50%)"></view>
                        <view class="absolute inset-0 border-8 border-blue-500"
                            style="clip-path: polygon(50% 50%, 0 50%, 0 0, 50% 0)"></view>
                    </view>
                </view>

                <view class="grid grid-cols-2 gap-2 mt-4">
                    <view class="flex items-center">
                        <view class="w-3 h-3 bg-indigo-500 rounded-full mr-2"></view>
                        <text class="text-xs text-slate-500">未开始 (10%)</text>
                    </view>
                    <view class="flex items-center">
                        <view class="w-3 h-3 bg-green-500 rounded-full mr-2"></view>
                        <text class="text-xs text-slate-500">已完成 (30%)</text>
                    </view>
                    <view class="flex items-center">
                        <view class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></view>
                        <text class="text-xs text-slate-500">进行中 (45%)</text>
                    </view>
                    <view class="flex items-center">
                        <view class="w-3 h-3 bg-red-500 rounded-full mr-2"></view>
                        <text class="text-xs text-slate-500">已逾期 (15%)</text>
                    </view>
                </view>
            </view>

            <!-- 目标类型分布 -->
            <view class="bg-white rounded-xl shadow-sm border border-slate-100 p-4">
                <view class="flex justify-between items-center mb-4">
                    <text class="text-sm font-medium text-slate-700">目标类型分布</text>
                    <button class="text-xs text-indigo-600" @tap="navigateTo('/subPages/statistics/goals')">
                        查看全部
                    </button>
                </view>

                <view v-for="(goalType, index) in goalTypes" :key="index" class="flex items-center mb-3">
                    <view class="w-8 h-8 rounded-full flex items-center justify-center mr-3"
                        :style="{ backgroundColor: goalType.color + '20' }">
                        <text class="iconfont text-sm" :class="goalType.icon" :style="{ color: goalType.color }"></text>
                    </view>
                    <view class="flex-1">
                        <text class="text-sm font-medium text-slate-800">{{ goalType.name }}</text>
                        <view class="flex items-center mt-1">
                            <view class="flex-1 h-1-5 bg-slate-200 rounded-full overflow-hidden">
                                <view class="h-full rounded-full"
                                    :style="{ width: `${goalType.percentage}%`, backgroundColor: goalType.color }">
                                </view>
                            </view>
                            <text class="text-xs text-slate-500 ml-2 w-8">{{ goalType.percentage }}%</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';

// 时间周期
const periods = [
    { label: '周', value: 'week' },
    { label: '月', value: 'month' },
    { label: '年', value: 'year' }
];
const selectedPeriod = ref('week');
const currentDate = ref(new Date());

// 当前周期文本
const currentPeriodText = computed(() => {
    const year = currentDate.value.getFullYear();
    const month = currentDate.value.getMonth() + 1;
    const weekNumber = getWeekNumber(currentDate.value);

    switch (selectedPeriod.value) {
        case 'week':
            return `第${weekNumber}周 (${year})`;
        case 'month':
            return `${year}年${month}月`;
        case 'year':
            return `${year}年`;
        default:
            return '';
    }
});

// 获取周数
const getWeekNumber = (date: Date) => {
    const firstDayOfYear = new Date(date.getFullYear(), 0, 1);
    const pastDaysOfYear = (date.getTime() - firstDayOfYear.getTime()) / 86400000;
    return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
};

// 统计数据
const stats = ref({
    habitCompletionRate: 85,
    goalProgress: 45,
    completedProjects: 3
});

// 习惯完成率数据
const habitCompletionData = ref([65, 75, 90, 85, 70, 80, 95]);
const weekDays = ['一', '二', '三', '四', '五', '六', '日'];

// 习惯排行
const topHabits = ref([
    {
        title: '晨跑',
        icon: 'icon-running',
        color: '#ef4444',
        completionRate: 95
    },
    {
        title: '阅读',
        icon: 'icon-book',
        color: '#3b82f6',
        completionRate: 80
    },
    {
        title: '冥想',
        icon: 'icon-meditation',
        color: '#8b5cf6',
        completionRate: 75
    }
]);

// 目标类型分布
const goalTypes = ref([
    {
        name: '学习',
        icon: 'icon-book',
        color: '#3b82f6',
        percentage: 40
    },
    {
        name: '健身',
        icon: 'icon-running',
        color: '#10b981',
        percentage: 25
    },
    {
        name: '职业',
        icon: 'icon-briefcase',
        color: '#8b5cf6',
        percentage: 20
    },
    {
        name: '财务',
        icon: 'icon-money',
        color: '#f59e0b',
        percentage: 15
    }
]);

// 初始化
onMounted(() => {
    loadStatisticsData();
});

// 加载统计数据
const loadStatisticsData = () => {
    // 这里应该从数据库或API获取数据
    // 为了演示，我们使用模拟数据
    console.log('加载统计数据');
    // 实际应用中这里会有API调用
};

// 切换时间周期
const changePeriod = (period: string) => {
    selectedPeriod.value = period;
    loadStatisticsData();
};

// 上一个周期
const prevPeriod = () => {
    switch (selectedPeriod.value) {
        case 'week':
            currentDate.value = new Date(currentDate.value.getTime() - 7 * 24 * 60 * 60 * 1000);
            break;
        case 'month':
            currentDate.value = new Date(
                currentDate.value.getFullYear(),
                currentDate.value.getMonth() - 1,
                1
            );
            break;
        case 'year':
            currentDate.value = new Date(
                currentDate.value.getFullYear() - 1,
                currentDate.value.getMonth(),
                1
            );
            break;
    }

    loadStatisticsData();
};

// 下一个周期
const nextPeriod = () => {
    switch (selectedPeriod.value) {
        case 'week':
            currentDate.value = new Date(currentDate.value.getTime() + 7 * 24 * 60 * 60 * 1000);
            break;
        case 'month':
            currentDate.value = new Date(
                currentDate.value.getFullYear(),
                currentDate.value.getMonth() + 1,
                1
            );
            break;
        case 'year':
            currentDate.value = new Date(
                currentDate.value.getFullYear() + 1,
                currentDate.value.getMonth(),
                1
            );
            break;
    }

    loadStatisticsData();
};

// 显示选项菜单
const showOptions = () => {
    uni.showActionSheet({
        itemList: ['导出数据', '分享统计'],
        success: (res) => {
            if (res.tapIndex === 0) {
                // 导出数据
                uni.showToast({
                    title: '导出功能开发中',
                    icon: 'none'
                });
            } else if (res.tapIndex === 1) {
                // 分享统计
                uni.showToast({
                    title: '分享功能开发中',
                    icon: 'none'
                });
            }
        }
    });
};

// 页面导航
const navigateTo = (url: string) => {
    uni.navigateTo({
        url
    });
};

// 返回上一页
const goBack = () => {
    uni.navigateBack();
};
</script>

<style>
/* 添加额外的图标 */
.icon-arrow-left:before {
    content: '\e628';
}

.icon-more:before {
    content: '\e639';
}

.icon-chevron-left:before {
    content: '\e62a';
}

.icon-chevron-right:before {
    content: '\e629';
}

.icon-running:before {
    content: '\e640';
}

.icon-book:before {
    content: '\e641';
}

.icon-meditation:before {
    content: '\e645';
}

.icon-briefcase:before {
    content: '\e646';
}

.icon-money:before {
    content: '\e647';
}
</style>